import React, { useState } from "react";
import { Button, Form, Input, message, Checkbox } from "antd";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import store from "store2";

import "./login.less";
import { adminLoginFn } from "@/api/admin";
import {
  changeLoginState,
  changeAdminName,
  changeToken,
  changeRole,
  changeCheckedKeys,
} from "@/store/modules/admin";
import { useDispatch } from "react-redux";

// import { useNavigate } from "react-router-dom"

const Login = (props) => {
  const [adminname, setAdminname] = useState(
    store.get("user") ? store.get("user") : ""
  );
  const [password, setPassword] = useState(
    store.get("password") ? store.get("password") : ""
  );
  const [remember, setRemember] = useState(
    store.get("remember") ? store.get("remember") : false
  );
  const dispatch = useDispatch();
  // const navigate = useNavigate()

  const onFinish = (values) => {
    console.log("Success:", values);
    if (values.remember) {
      console.log("记住密码");
      store.set("user", values.adminname);
      store.set("password", values.password);
      store.set("remember", values.remember);
    } else {
      console.log("不记住密码");
      store.set("user", "");
      store.set("password", "");
      store.set("remember", false);
    }
    //登录判断
    adminLoginFn(values).then((res) => {
      switch (res.data.code) {
        case "10005":
          message.error("用户未注册");
          break;
        case "10003":
          message.error("密码输入错误");
          break;
        default:
          message.success("登录成功");

          //把更改的信息存到本地
          store.set("users", {
            LoginState: true,
            token: res.data.data.token,
            adminname: res.data.data.adminname,
            role: res.data.data.role,
            checkedKeys: res.data.data.checkedkeys,
          });

          //更新redux里的状态
          dispatch(changeLoginState(true));
          dispatch(changeAdminName(res.data.data.adminname));
          dispatch(changeToken(res.data.data.token));
          dispatch(changeRole(res.data.data.role));
          dispatch(changeCheckedKeys(res.data.data.checkedkeys));

          // //借助navagate编程式导航跳转到首面 // 退出时是哪个页面登录就是那个
          // navigate("/")
          break;
      }
    });
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  console.log("adminname", adminname);
  console.log("password", password);
  return (
    <div className="login">
      <div className="login-box">
        <h3
          style={{
            color: "#ffffff90",
          }}
        >
          赤霄后台管理系统
        </h3>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            adminname: adminname,
            password: password,
            remember: remember,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            name="adminname"
            rules={[
              {
                required: true,
                message: "请输入你的用户名",
              },
            ]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="用户名"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: "请输入你的密码",
              },
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="密码"
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox
                style={{
                  color: "#ffffff90",
                }}
              >
                记住密码
              </Checkbox>
            </Form.Item>
          </Form.Item>

          <Form.Item className="login-form-footer">
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};
export default Login;
